<template>
  <div
    v-loading="loading"
    class="pdf-container"
    element-loading-text="PDF文件资源加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <viewHeader ref="viewHeader" :file-id="fileId" />
    <iframe
      id="pdfIframe"
      class="pdfIframe"
      :src="pdfUrl"
    />
  </div>
</template>
<script>
import viewHeader from './header.vue'
export default {
  components: { viewHeader },
  data() {
    return {
      fileId: null,
      pdfUrl: null,
      loading: false

    }
  },
  mounted() {
    this.loading = true
    var { id } = this.$route.params
    this.fileId = id
    this.pdfUrl = this.global.getFileView(id)
    const $this = this
    document.getElementById('pdfIframe').onload = function() {
      $this.loading = false
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
  .pdf-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .pdfIframe{
      height: 100%;
      border: 0;
    }
  }
</style>
